<script setup>
import {useRoute} from 'vue-router'
import router from "@/router";

const $route = useRoute()
const account = JSON.parse(localStorage.getItem('account-info') || '{}')


/**
 * 个人信息
 */
const accountInfo = () => {
    if (account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin') {
        router.push(`/manage/admin-admin-info-admin`)
    } else if (account.accountRoleName === 'common-student' || account.accountRoleName === 'visitor-student') {
        router.push(`/manage/student-student-info-student`)
    } else if (account.accountRoleName === 'common-teacher' || account.accountRoleName === 'visitor-teacher') {
        router.push(`/manage/teacher-teacher-info-teacher`)
    } else if (account.accountRoleName === 'common-business' || account.accountRoleName === 'visitor-business') {
        router.push(`/manage/business-business-info-business`)
    } else {
        router.push(`/manage/order-class-admin-order-class-admin-info-order-class-admin`)
    }
}

/**
 * 退出登录
 */
const accountLogout = () => {
    localStorage.removeItem('account-info')
    router.push(`/`)
}
</script>

<template>
    <div>
        <div style="height: 60px; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #ddd">
            <div style="flex: 1">
                <div style="padding-left: 20px; display: flex; align-items: center">
                    <img src="https://s11.ax1x.com/2024/02/10/pF3rwxP.png" alt="" style="width: 40px">
                    <div style="font-weight: bold; font-size: 24px; margin-left: 5px">高校订单班管理系统</div>
                </div>
            </div>
            <div style="width: fit-content; padding-right: 10px; display: flex; align-items: center;">
                <el-dropdown>
                    <!-- 头像 -->
                    <el-avatar
                            :src="account.accountPhoto || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"/>
                    <template #dropdown>
                        <el-dropdown-item @click="accountInfo">
                            <el-icon>
                                <Avatar/>
                            </el-icon>
                            个人信息
                        </el-dropdown-item>
                        <el-dropdown-item @click="accountLogout">
                            <el-icon>
                                <Back/>
                            </el-icon>
                            退出登录
                        </el-dropdown-item>
                    </template>
                </el-dropdown>
                <span style="margin-left: 5px">{{ account.accountName }}</span>
            </div>
        </div>

        <div style="display: flex">
            <div style="width: 200px; border-right: 1px solid #ddd; height: calc(100vh - 60px); overflow-y: auto">
                <el-menu
                        router
                        style="border: none"
                        :default-active="$route.path"
                        :default-openeds="['1', '2', '3', '4', '5','6']">
                    <!--  学生  -->
                    <el-menu-item index="/manage/home"
                                  v-if="account.accountRoleName === 'common-student' || account.accountRoleName === 'visitor-student'">
                        <el-icon>
                            <StarFilled/>
                        </el-icon>
                        <span>系统首页</span>
                    </el-menu-item>

                    <!--  管理员  -->
                    <el-sub-menu index="1"
                                 v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
                        <template #title>
                            <el-icon>
                                <Setting/>
                            </el-icon>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="/manage/admin-system-admin">
                            <el-icon>
                                <Cpu/>
                            </el-icon>
                            <span>服务监控</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2"
                                 v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
                        <template #title>
                            <el-icon>
                                <Avatar/>
                            </el-icon>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item index="/manage/admin-account-admin">
                            <el-icon>
                                <UserFilled/>
                            </el-icon>
                            <span>用户信息</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/admin-role-admin">
                            <el-icon>
                                <User/>
                            </el-icon>
                            <span>角色信息</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/admin-student-admin">
                            <el-icon>
                                <UserFilled/>
                            </el-icon>
                            <span>学生信息</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/admin-teacher-admin">
                            <el-icon>
                                <User/>
                            </el-icon>
                            <span>教师信息</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/admin-order-class-admin-admin">
                            <el-icon>
                                <UserFilled/>
                            </el-icon>
                            <span>订单班管理员信息</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/admin-business-admin">
                            <el-icon>
                                <OfficeBuilding/>
                            </el-icon>
                            <span>企业信息</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3"
                                 v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
                        <template #title>
                            <el-icon>
                                <Monitor/>
                            </el-icon>
                            <span>订单班管理</span>
                        </template>
                        <el-menu-item index="/manage/admin-order-class-admin">
                            <el-icon>
                                <Platform/>
                            </el-icon>
                            <span>订单班信息</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4"
                                 v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
                        <template #title>
                            <el-icon>
                                <Memo/>
                            </el-icon>
                            <span>课程管理</span>
                        </template>
                        <el-menu-item index="/manage/admin-course-admin">
                            <el-icon>
                                <Reading/>
                            </el-icon>
                            <span>课程信息</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="5"
                                 v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
                        <template #title>
                            <el-icon>
                                <School/>
                            </el-icon>
                            <span>学院/专业管理</span>
                        </template>
                        <el-menu-item index="/manage/admin-collage-admin">
                            <el-icon>
                                <DataBoard/>
                            </el-icon>
                            <span>学院信息</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/admin-major-admin">
                            <el-icon>
                                <DataAnalysis/>
                            </el-icon>
                            <span>专业信息</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="6"
                                 v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
                        <template #title>
                            <el-icon>
                                <House/>
                            </el-icon>
                            <span>楼栋/房间管理</span>
                        </template>
                        <el-menu-item index="/manage/admin-building-admin">
                            <el-icon>
                                <HomeFilled/>
                            </el-icon>
                            <span>楼栋信息</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/admin-room-admin">
                            <el-icon>
                                <Bell/>
                            </el-icon>
                            <span>房间信息</span>
                        </el-menu-item>
                    </el-sub-menu>

                    <!--  学生  -->
                    <el-sub-menu index="1"
                                 v-if="account.accountRoleName === 'common-student' || account.accountRoleName === 'visitor-student'">
                        <template #title>
                            <el-icon>
                                <Notebook/>
                            </el-icon>
                            <span>成绩管理</span>
                        </template>
                        <el-menu-item index="/manage/student-course-score-info-student">
                            <el-icon>
                                <Tickets/>
                            </el-icon>
                            <span>个人课程成绩</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/student-evaluate-student">
                            <el-icon>
                                <Ticket/>
                            </el-icon>
                            <span>个人综合评价</span>
                        </el-menu-item>
                    </el-sub-menu>

                    <!--  教师  -->
                    <el-sub-menu index="1"
                                 v-if="account.accountRoleName === 'common-teacher' || account.accountRoleName === 'visitor-teacher'">
                        <template #title>
                            <el-icon>
                                <Notebook/>
                            </el-icon>
                            <span>成绩管理</span>
                        </template>
                        <el-menu-item index="/manage/teacher-course-score-teacher">
                            <el-icon>
                                <Tickets/>
                            </el-icon>
                            <span>课程成绩</span>
                        </el-menu-item>
                    </el-sub-menu>

                    <!--  企业  -->
                    <el-sub-menu index="1"
                                 v-if="account.accountRoleName === 'common-business' || account.accountRoleName === 'visitor-business'">
                        <template #title>
                            <el-icon>
                                <UserFilled/>
                            </el-icon>
                            <span>学生管理</span>
                        </template>
                        <el-menu-item index="/manage/business-course-score-business">
                            <el-icon>
                                <Tickets/>
                            </el-icon>
                            <span>学生成绩</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/business-student-info-business">
                            <el-icon>
                                <CircleCheck/>
                            </el-icon>
                            <span>学生录用</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2"
                                 v-if="account.accountRoleName === 'common-business' || account.accountRoleName === 'visitor-business'">
                        <template #title>
                            <el-icon>
                                <Monitor/>
                            </el-icon>
                            <span>订单班管理</span>
                        </template>
                        <el-menu-item index="/manage/business-order-class-business">
                            <el-icon>
                                <Platform/>
                            </el-icon>
                            <span>订单班查看</span>
                        </el-menu-item>
                    </el-sub-menu>


                    <!--  订单班管理员  -->
                    <el-sub-menu index="1"
                                 v-if="account.accountRoleName === 'common-order-class-admin' || account.accountRoleName === 'visitor-order-class-admin'">
                        <template #title>
                            <el-icon>
                                <List/>
                            </el-icon>
                            <span>订单班管理</span>
                        </template>
                        <el-menu-item index="/manage/order-class-admin-order-class-order-class-admin">
                            <el-icon>
                                <Monitor/>
                            </el-icon>
                            <span>订单班安排</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/order-class-admin-order-class-release-order-class-admin">
                            <el-icon>
                                <Platform/>
                            </el-icon>
                            <span>订单班发布</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/order-class-admin-order-class-start-order-class-admin">
                            <el-icon>
                                <Monitor/>
                            </el-icon>
                            <span>订单班开班</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/order-class-admin-order-class-end-order-class-admin">
                            <el-icon>
                                <Platform/>
                            </el-icon>
                            <span>订单班结班</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2"
                                 v-if="account.accountRoleName === 'common-order-class-admin' || account.accountRoleName === 'visitor-order-class-admin'">
                        <template #title>
                            <el-icon>
                                <Memo/>
                            </el-icon>
                            <span>课程管理</span>
                        </template>
                        <el-menu-item index="/manage/order-class-admin-course-arrange-order-class-admin">
                            <el-icon>
                                <Reading/>
                            </el-icon>
                            <span>课程安排</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3"
                                 v-if="account.accountRoleName === 'common-order-class-admin' || account.accountRoleName === 'visitor-order-class-admin'">
                        <template #title>
                            <el-icon>
                                <UserFilled/>
                            </el-icon>
                            <span>学生管理</span>
                        </template>
                        <el-menu-item index="/manage/order-class-admin-student-order-class-admin">
                            <el-icon>
                                <CircleCheck/>
                            </el-icon>
                            <span>学生审核</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/order-class-admin-student-info-order-class-admin">
                            <el-icon>
                                <List/>
                            </el-icon>
                            <span>学生信息</span>
                        </el-menu-item>
                    </el-sub-menu>

                </el-menu>
            </div>

            <div style="flex: 1; width: 0; background-color: #f8f8ff; padding: 10px">
                <router-view/>
            </div>
        </div>

    </div>
</template>

<style scoped>
.el-menu-item.is-active {
    background-color: #dcede9 !important;
}

.el-menu-item:hover {
    color: #11A983;
}

:deep(th) {
    color: #333;
}
</style>